<template>
  <button @click="change" style="margin: 100px;">随机</button>
  <hr>
  <transition-group class="container" tag="div"
      move-class="move">
    <div class="item" v-for="item in list" :key="item.id">{{ item.name }}</div>
  </transition-group>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import _ from 'lodash'

const list = ref(Array.apply(null, { length: 81 } as number[]).map((_, index) => {
  return {
    id: index,
    name: (index % 9) + 1
  }
}))

const change = () => {
  list.value = _.shuffle(list.value)
}
</script>

<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(40 * 10) + px;

  .item {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.move {
  transition: all 1.5s ease;
}
</style>